<template>
  <el-drawer :visible.sync="show"
             destroy-on-close
             :show-close="false"
             :close-on-click-modal="false"
             :title="'列配置 -'+uuid " direction="rtl" size="25%">
    <div style="height: calc(100% - 50px);">
      <ColumnIndex ref="columnIndex" @update="$emit('update',$event)"/>
    </div>
    <div class="button-container">
      <el-button @click="cancelClick" :loading="loading">返回页面</el-button>
      <el-popconfirm
          @confirm="confirmClick"
          title="保存当前设置？"
      >
        <el-button slot="reference" type="primary" :loading="loading">保存</el-button>
      </el-popconfirm>
    </div>
  </el-drawer>
</template>
<style scoped>
.button-container {
  height: 50px;
  display: grid;
  grid-template-columns: auto auto; /* 两列布局 */
  justify-content: end; /* 靠右对齐 */
  align-items: center; /* 垂直居中 */
  grid-column-gap: 10px; /* 列之间的间距 */
  padding-right: 10px; /* 右侧内边距，可根据需要调整 */
}
</style>
<script>
import {put} from "@/utils/http/httpUtils";
import ColumnIndex from "@/components/table/ol-table/components/ol-table-column-config/columnIndex.vue";

export default {
  name: 'olTableColumnConfig',
  inject: ['http'],
  components: {
    ColumnIndex,
  },
  data() {
    return {
      uuid: '',
      show: false,
      loading: true,
    }
  },
  methods: {
    cancelClick() {
      this.$refs.columnIndex.doUpdate();
      this.show = false;
    },
    confirmClick() {
      let gridOptions = this.$refs.columnIndex.gridOptions
      let datas = [];
      for (let data of gridOptions.data) {
        let o = {id: data.id,visible:data.visible == 1 ? 1 : 0};
        for (let j = 2; j < gridOptions.columns.length; j++) {
          let column = gridOptions.columns[j];
          o[column.field] = data[column.field];
          if (column.field.indexOf("ToOtherProp") != -1) {
            data.otherProp[column.field] = data[column.field];
            o.otherProp = data.otherProp;
          }
        }
        delete o.groupTotalToOtherProp;
        if(o.fixed == 'left'){
          o.fixed = 1;
        } else if(o.fixed == 'right'){
          o.fixed = 2;
        }
        datas.push(o)
      }
      let i = 1;
      for (let data1 of datas) {
        i++;
        data1.sort = i;
        if (data1.otherProp) {
          data1.otherProp = JSON.stringify(data1.otherProp);
        }
      }
      datas[0].uuid = gridOptions.data[0].uuid;
      datas[0].thmem = gridOptions.data[0].thmem;
      this.loading = true;

      put(this.http, '/online/tableConfigColumn/editBatch', datas).then(res => {
        if (res) {
          this.$emit('ok');
          this.show = false;
        }
      }).finally(() => {
        this.loading = false;
      })
    },
    copyTextToClipboard(text) {
      navigator.clipboard.writeText(text).then(() => {
        console.log('Text copied to clipboard');
      }).catch(err => {
        console.error('Failed to copy text: ', err);
      });
    },
    open(tableConfig, id, columns) {
      this.show = true;
      this.loading = true;
      this.uuid = id;
      this.$nextTick(() => {
        this.$refs.columnIndex.init(tableConfig, JSON.parse(JSON.stringify(columns)))
        this.loading = false;
      })
    },
  }
}
</script>
<style lang="less" scoped>
.page-left {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.vxe-pager {
  height: 35px;
  top: 5px;
}

.container :deep(.el-drawer__header) {
  padding: 0px 20px;
  margin-bottom: 0px;
}

.el-tag:hover {
  background-color: #f56c6c; /* 红色背景 */
  color: #fff; /* 白色文字 */
  cursor: pointer;
}

:deep(.move) {
  cursor: move;
}

</style>
